<template>
  <div class="homeSwiper">
    <swiper
      autoplay
      interval="5000"
      duration="500"
      :circular="true"
      class="homeSwiper-wrapper">
      <div
        v-for="(item, index) in swiperImg"
        class="homeSwiper-detail"
        :key="item">
        <swiper-item class="homeSwiper-item">
          <img @tap="swiperImgClick(index)" class="img" :src="item" />
        </swiper-item>
      </div>
    </swiper>
  </div>
</template>

<script>
import { ERR_OK } from 'api/config'
import { getHomeSwiper } from 'api/home'

export default {
  mounted () {
    this.getHomeSwiper()
  },
  data () {
    return {
      swiperImg: []
    }
  },
  methods: {
    swiperImgClick (index) {
      wx.previewImage({
        urls: this.swiperImg,
        current: index
      })
    },
    async getHomeSwiper () {
      const res = await getHomeSwiper()

      if (res.code === ERR_OK && res.data.length) {
        const arr = res.data[0].imageUrl.split(',')
        this.swiperImg = arr
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .homeSwiper {
    width: 100%;
    height: 180px;
    position: relative;
    overflow: hidden;
    > .homeSwiper-wrapper {
      width: 100%;
      height: 100%;
      .homeSwiper-item {
        width: 100%;
        height: 100%;
        > .img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
</style>
